<template>
  <div class="container">
    <div class="category-header">
      全部分类
    </div>
      <div class="category-content">
    <div class="category-item"   v-for="item in categoryList" :key="item.id" @click="handleClick(item.id)" >
      <img src="../assets/images/yzfc.png" alt="">
        <div class="category-item-name">
          {{ item.title }}
        </div>
        </div>
      </div>
  </div>
</template>
<script setup lang="ts">
import { ref ,onMounted ,nextTick} from 'vue';
import { useRouter } from 'vue-router';
import { useCategoryStore } from '@/stores/categoryStore';
import type { CategoryItem } from '@/service/category/type';
import gsap from 'gsap';
const router = useRouter();
const categoryStore = useCategoryStore();
// 点击分类跳转
const handleClick = (i: number) => {
  console.log(i);
  router.push(`/category/${i}`);
}
const categoryList = ref<CategoryItem[]>([]);
onMounted(async () => {
  await categoryStore.getCategoryList();
  categoryList.value = categoryStore.categoryList;


  await nextTick();
  gsap.from(".category-item", {
    y: '100%', // 从下方 100px 开始
    opacity: 0, // 从透明开始
    duration: 0.2, // 动画持续时间
    stagger: 0.1, // 每个项目之间的延迟
    ease: "power2.out" // 缓动效果
  });
})

</script>
<style scoped>
.container {
  color: var(--color);
  width: 1100px;
  margin: 0 auto;
  height: 100vh;
  padding: 20px;
  .category-header {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .category-content {
    display: flex;
    justify-content: left; 
    overflow: hidden;
    height: auto;
    flex-wrap: wrap;
    .category-item {
    flex-basis: 19%;
    height: 80px;
    background-color: #fff;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    display: flex;
   .category-item-name {
    margin-left: 10px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
   }
   }
  }
  .category-item:hover {
    cursor: pointer;
  }
  
}

@media (max-width: 768px) {
  .category-item {
    flex-basis: 45%;
  }
}
</style>
